<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue动画</title>
    <style type="text/css">
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
            opacity: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="demo">
        <button @click="isShow">{{text}}</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                show:true,
                text:'隐藏'
            }
        },
        methods:{
            isShow(){
                //!取反
                //Boolean('a'): true
                /*
                * !Boolean('a') 等同于 !（'a'）
                * 当使用！(取反)的时候，默认会把右边的值转换为布尔值在取反
                *
                * 转布尔值
                *!!('a') => true
                * Boolean('a')=>true
                * 转数字
                * Number('1') =>1
                * '1' * 1 => 1
                * 转字符串
                * string(1)=>'1'
                * 1+''=>'1'
                * */
                //切换显示隐藏
                this.show = !this.show;
                this.text = this.show? '隐藏':'显示';
            }
        }
    })
</script>
</body>
</html>